<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tit11le</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*第一个屏幕*/
        .first {
            background-color: #0da5d6;
            padding-top: 50px;
        }

        .first .logo {
            background: url("images/logo.png");
            width: 251px;
            height: 186px;
            margin: 0 auto;
        }

        .first .text {
            text-align: center;
            margin: 50px auto;
        }

        .first .text img {
            margin: 0 34px;
            opacity: 0;
        }

        .first .info {
            background: url("images/info_1.png");
            width: 772px;
            height: 50px;
            margin: 100px auto;
        }

        /*第二个屏幕*/
        .seconds {
            background-color: #2AB561;
            overflow: hidden;
        }

        .seconds > div {
            display: flex;
            /*侧轴居中对齐*/
            align-items: center;
            /*起点对齐*/
            justify-content: center;
        }

        .seconds .shield {
            width: 500px;
            height: 400px;
        }

        /*这个浮动是让每张图片的距离缩小*/
        .seconds .shield img {
            float: left;
        }

        .seconds .info {
            width: 635px;
            height: 309px;
            background: url("images/info_2.png");
        }

        .seconds .shield img:nth-child(1) {
            transform: translate(-400px, -500px) rotate(-55deg);
        }

        .seconds .shield img:nth-child(2) {
            transform: translate(-350px, -500px) rotate(-75deg);
        }

        .seconds .shield img:nth-child(3) {
            transform: translate(200px, -500px) rotate(-36deg);
        }

        .seconds .shield img:nth-child(4) {
            transform: translate(550px, -500px) rotate(-95deg);
        }

        .seconds .shield img:nth-child(5) {
            transform: translate(-230px, -500px) rotate(-46deg);
        }

        .seconds .shield img:nth-child(6) {
            transform: translate(330px, -500px) rotate(-23deg);
        }

        .seconds .shield img:nth-child(7) {
            transform: translate(400px, 500px) rotate(-42deg);
        }

        .seconds .shield img:nth-child(8) {
            transform: translate(400px, 500px) rotate(-80deg);
        }

        .seconds .shield img:nth-child(9) {
            transform: translate(-400px, 500px) rotate(-45deg);
        }

        /*第三个屏幕*/
        .thrid {
            background-color: #DE8910;
            position: relative;
            overflow: hidden;
        }

        .thrid > div {
            display: flex;
            /*四周环绕justify-content:space-around*/
            justify-content: space-around;
            /*侧轴居中对齐*/
            align-items: center;
        }

        .thrid .info {
            background: url("images/info_3.png");
            width: 631px;
            height: 278px;
        }

        .thrid .circle {
            width: 453px;
            height: 449px;
            background: url("images/circle.png");
        }

        .thrid .rocket {
            background: url("images/rocket.png");
            width: 203px;
            height: 204px;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translate(100px, 230px);
        }

        /*第四个屏幕*/
        .fourth {
            background-color: #0EA9B1;
        }

        .fourth > div {
            display: flex;
            /*侧轴居中对齐*/
            align-items: center;
            /*四周环绕*/
            justify-content: space-around;
        }

        /*搜索栏*/
        /*加定位不要给那个搜索栏加，要给搜索按这个大盒子加*/
        .fourth .search {
            width: 530px;
            height: 300px;
            position: relative;
        }

        .fourth .toolbar {
            background: url("images/search.png");
            width: 529px;
            height: 66px;
            transform: translateX(-120%);

        }

        .fourth .keys {
            background: url("images/key.png");
            /*width:99px;*/
            height: 22px;
            position: absolute;
            top: 23px;
            left: 22px;
        }

        .fourth .wrap {
            overflow: hidden;
            margin-top: -12px;
        }

        .fourth .wrap .result {
            width: 529px;
            height: 372px;
            background: url("images/result.png");
            transform: translateY(-100%);
        }

        .fourth .info {
            background: url("images/info_4.png");
            width: 612px;
            height: 299px;
        }

        /*第五个屏幕*/
        .fifth {
            background-color: #0DA5D6;

            overflow: hidden;
        }

        .fifth > div {
            display: flex;
            /*调整主轴方向*/
            flex-direction: column;
            align-items: center;

        }

        .fifth .info {
            background: url("images/info_5.png");
            width: 1077px;
            height: 134px;

        }

        .fifth .browser {
            flex: 1;
            width: 1004px;
            position: relative;
        }

        .fifth .swrap {
            width: 0;
            opacity: 1;
            height: 30px;
            position: absolute;
            left: 80px;
            top: 30px;
            border: 1px solid #fff;
            border-radius: 2px;
        }

        .fifth .browser .bg {
            background: url("images/toolbar.png");
            width: 1004px;
            height: 79px;
            opacity: 0;

        }

        .fifth .line {
            background: #fff;
            position: absolute;
            opacity: 0.6;
        }

        .fifth .leftline {
            width: 1px;
            height: 100%;
            left: 0;
            top: 0;
            transform: translateY(-130%);
        }

        .fifth .topline {
            width: 100%;
            height: 1px;
            left: 0;
            top: 0;
            transform: translateX(130%);
        }

        .fifth .rightline {
            width: 1px;
            height: 100%;
            right: 0;
            top: 0;
            transform: translateY(130%);
        }

        .fifth .bottomline {
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            transform: translateX(-130%);
        }

        .fifth .extra {
            background: url("images/extra.png");
            width: 394px;
            height: 29px;
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translateX(150%);

        }

        /*
                动画
        */
        /*第一屏动画*/
        .first.current .text img {
            margin: 0 4px;
            /*浏览器加载*/
            transition: all 1s linear;
            opacity: 1;
        }

        /*第二个动画*/
        /*由于要进行还原所以需要获取所有的img图片，并进行打乱
        */
        /*注意：current与后面的class属性名要有空格，不然没效果*/
        .seconds.current .shield img {
            /*创建还原，*/
            transition: all 1s linear;
            transform: translate(0, 0) rotate(0deg);
        }

        /*第三个动画*/
        .thrid.current .rocket {
            transform: translate(950px, -250px);
            transition: all 1s linear;
        }

        /*第四个动画*/

        .fourth.current .toolbar {
            transition: all 1s linear;
            transform: translateX(0);
        }

        .fourth.current .keys {
            /*forwards不加这个效果将消失*/
            animation: typing 1.5s steps(5) 1.3s forwards;
        }

        .fourth.current .result {
            transition: all 1s linear 2.8s;
            transform: translateY(0);
        }

        /*打字效果*/
        @keyframes typing {
            0% {
                width: 0;
            }

            100% {
                width: 99px;
            }
        }

        /*第五个动画*/
        .fifth.current .line {
            transform: translate(0);
            transition: all 1s linear;
        }

        .fifth.current .swrap {

            width: 910px;
            opacity: 0.3;
            transition: all 1s linear 1.3s;
        }
        .fifth.current .bg{
           opacity: 0.6;
            transition: all 1s linear 1s;
        }
        .fifth.current .extra{
            transition:all 1s linear 1s;
            transform: translateX(0);
        }
    </style>

</head>
<body>
<div id="fullpage">
    <!--第一个屏幕-->
    <div class="first section active">
        <!--不会动的图片-->
        <!--LOGO位置-->
        <div class="logo"></div>
        <!--文本，插入图片-->
        <div class="text">
            <img src="images/text_1.png">
            <img src="images/text_2.png">
            <img src="images/text_3.png">
            <img src="images/text_4.png">
            <img src="images/text_5.png">
            <img src="images/text_6.png">
            <img src="images/text_7.png">
            <img src="images/text_8.png">
        </div>
        <!--信息区域，无动画效果-->
        <div class="info"></div>
    </div>
    <!--第二个屏幕-->
    <div class="seconds section ">
        <!--盾牌-->
        <div class="shield">
            <img src="images/shield_1.png">
            <img src="images/shield_2.png">
            <img src="images/shield_3.png">
            <img src="images/shield_4.png">
            <img src="images/shield_5.png">
            <img src="images/shield_6.png">
            <img src="images/shield_7.png">
            <img src="images/shield_8.png">
            <img src="images/shield_9.png">
        </div>
        <div class="info"></div>
    </div>
    <!--第三个屏幕-->
    <div class="thrid section">
        <!--文本-->
        <div class="info"></div>
        <!--circle：圆-->
        <div class="circle"></div>
        <!--火箭-->
        <div class="rocket"></div>
    </div>
    <!--第四个屏幕-->
    <div class="fourth section">
        <!--查询盒子-->
        <div class="search">
            <!--输入栏-->
            <div class="toolbar"></div>
            <!--关键字-->
            <div class="keys"></div>
            <!--查询结果的外盒子-->
            <div class="wrap">
                <!--查询结果-->
                <div class="result"></div>
            </div>
        </div>
        <!--文本-->
        <div class="info"></div>
    </div>
    <!--第五个屏幕-->
    <div class="fifth section ">
        <div class="info"></div>
        <!--browser浏览器-->
        <div class="browser">
            <!--背景-->

            <!--工具栏-->
            <div class="swrap">

            </div>
            <div class="bg"></div>
            <!--线-->
            <div class="topline line"></div>
            <div class="bottomline line"></div>
            <div class="leftline line"></div>
            <div class="rightline line"></div>
            <!--底部-->
            <div class="extra"></div>

        </div>

    </div>
</div>

<script>
    $(function () {
        $("#fullpage").fullpage({
            afterLoad: function (anchorLink, index) {
                //调取section属性中的 current属性 删除
                $(".section").removeClass("current");
                //需要加定时器（必须要加！不然没效果）
                window.setTimeout(function () {
                    //因为index默认值是1，可是section是个伪数组，索引是从0开始，所以要index-1
                    $(".section").eq(index - 1).addClass("current");
                }, 100);

            }
        });
    })

</script>
</body>
</html>